<template>
	<view class="home">
		<!-- 顶部tabs切换 -->
		<view class="home-header-one ff-color-fff ff-width-100" :style="tabberStyle">
			<view class="ff-flex-between ff-align-items-one ff-padding-15 ff-bg-blue ff-width-100">
				<view class="home-header-one-left ff-align-items-one">
					<view class="ff-margin-right-20"
						:class="{ 'ff-font-17': tabberTypeOne, 'ff-font-weight-600': tabberTypeOne }"
						@click="tabberTypeClick(1)">技术服务机构</view>
					<view v-if="userType == 8"
						:class="{ 'ff-font-17': tabberTypeTwo, 'ff-font-weight-600': tabberTypeTwo }"
						@click="tabberTypeClick(2)">需求推荐</view>
				</view>
				<view class="home-header-one-right" @click.stop="searchClick">
					<image class="animate__animated animate__zoomIn"
						src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home_search.png">
					</image>
				</view>
			</view>
			<!-- tabs类型切换 -->
			<u-tabs name="cate_name" active-color="#3178FF" height="90" :list="tabsList" :is-scroll="false"
				:current="currentTabsIndex" @change="changeType"></u-tabs>
		</view>
		<!-- 机构or需求列表部分  -->
		<view class="ff-padding-10 home-content ff-margin-top-98">
			<view v-if="stateType == 1">
				<view v-if="InstitutionsList.length > 0">
					<view class="ff-bg-fff ff-padding-15 ff-margin-bottom-10 ff-border-radius-9 ff-align-items-one"
						@click="organizationClick(item)" v-for="(item, index) of InstitutionsList" :key="index">
						<view class="home-content-head ff-margin-right-15 ff-border-radius-9">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/default_avatar.png"
								mode=""></image>
						</view>
						<view class="home-content-info home-content-detailed">
							<view class="ff-ellipsis-1 ff-font-15 ff-font-weight-600 ff-line-height-1-1">
								{{ item.orgName }}
							</view>
							<view class="ff-flex ff-margin-top-9 ff-margin-bottom-8 ff-font-13">
								<view class="ff-font-13 home-content-detailed-fraction ff-flex">
									<view class="ff-color-fff">{{ item.registerNum !== null ? item.registerNum : 0 }}
									</view>
									一消证书
								</view>
								<view class="ff-font-13 ff-margin-left-10 home-content-detailed-fraction ff-flex">
									<view class="ff-color-fff">{{ item.operatorNum !== null ? item.operatorNum : 0 }}
									</view>
									操作员证书
								</view>
							</view>
							<view class="ff-font-13 ff-color-gray-one home-content-detailed-address">
								<view class="ff-align-items-one">
									<image
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png"
										mode=""></image>
									<view class="ff-margin-left-2 ff-ellipsis-1 ff-width-230">
										距离您{{ item.nearest / 1000 }}km |
										{{ item.orgAddr == null ? '/' : item.orgAddr }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
						bg-color="#f5f5f5">没有更多了</u-divider>
				</view>
				<f-noData v-else></f-noData>
			</view>
			<view v-if="stateType == 2">
				<view v-if="demandList.length > 0">
					<view class="ff-bg-fff ff-padding-15 ff-margin-bottom-10 ff-border-radius-9 ff-align-items-one"
						@click="demandClick(item)" v-for="(item, index) of demandList" :key="index">
						<view class="home-content-detailed">
							<view
								class="ff-align-items-one ff-flex-between ff-font-15 ff-font-weight-600 ff-line-height-1-1 ff-margin-bottom-10">
								<view class="ff-ellipsis-1 ff-width-250">{{ item.projectName }}</view>
								<view class="ff-font-13 fraction ff-color-fff" v-if="item.isResponse == 1">已响应</view>
							</view>
							<view class="ff-font-13 ff-color-gray-one home-content-detailed-address">
								<view class="ff-align-items-one ff-margin-bottom-9">
									<image class="ff-margin-right-2"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-budget.png"
										mode=""></image>
									<view class="ff-ellipsis-1">项目预算：{{ item.projectBudget || '0' }}元</view>
								</view>
								<view class="ff-align-items-one ff-margin-bottom-9">
									<image class="ff-margin-right-2"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-company.png"
										mode=""></image>
									<view class="ff-width-315 ff-ellipsis-1">需求方：{{ item.companyName }}</view>
								</view>
								<view class="ff-align-items-one ff-margin-bottom-9">
									<image class="ff-margin-right-2"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/times.png"
										mode=""></image>
									<view class="ff-width-315 ff-ellipsis-1">
										发布时间：{{ item.created == null ? '/' : item.created.substr(0, item.created.length - 3) }}
									</view>
								</view>
								<view class="ff-align-items-one">
									<image class="ff-margin-right-2"
										src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png"
										mode=""></image>
									<view class="ff-width-315 ff-ellipsis-1">距离您{{ item.nearest / 1000 || '0' }}km |
										{{ item.projectAddr == null ? '/' : item.projectAddr }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
						bg-color="#f5f5f5">没有更多了</u-divider>
				</view>
				<f-noData v-else></f-noData>
			</view>
		</view>

		<!-- -----------------------------弹框区----------------------------------------->
		<!-- 用户授权提示弹框 -->
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
	</view>
</template>

<script>
	export default {
		name: 'maintenanceSquare',
		data() {
			return {
				locationModal: false, // 定位失败弹框显/隐
				userType: '', // 当前角色的状态值
				tabberTypeOne: true, // tabber替换1
				tabberTypeTwo: false, // tabber替换2
				stateType: 1, // 维保机构列表还是需求列表 1 or 2
				// tabs类型切换
				tabsList: [{
					cate_name: '离我最近'
				}, {
					cate_name: '最新注册'
				}],
				InstitutionsList: [], // 服务机构列表数据
				demandList: [], // 需求列表数据
				// 机构 or 需求列表需要的参数
				currentTabsIndex: 0, // tabs的下标
				params: {
					serviceType: 1, // 业务类型，1-维保，2-评估
					sort: {
						type: 1, // 机构： 3:证书资质 ，1:离我最近，0:最新注册 ;  需求： 0:综合 1:离我最近 2:最新发布
						longitude: '',
						latitude: ''
					},
					current: 1,
					size: 10
				},
				noData: false, // 没有更多数据了：显/隐
			};
		},
		mounted() {
			this.userType = uni.getStorageSync('userInfo')
				.userType; // 给当前角色赋值  用户类型(1:救援机构人员 5:单位用户 8:维保人员 9: 维保专家 10:技术人员)
			// 获取经纬度
			let that = this;
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					// console.log('当前位置的经度-----：', res);
					that.params.sort.latitude = res.latitude;
					that.params.sort.longitude = res.longitude;
					that.getInstitutionsList(); // 获取服务机构列表数据
					if (that.userType == 8) {
						that.getSpotCheck(); // 判断是否需要抽查
						that.getQueryUserNotReadLog() // 判断是否需要作废提示
						that.getDemandList(); // 请求需求列表数据
					}
				},
				fail() {
					// console.log('位置定位失败返回----', error);
					that.locationModal = true;
				}
			});
		},
		computed: {
			tabberStyle() {
				let top = ''
				if (this.userType == 8) {
					top = '0'
				} else {
					top = `top:${this.customBar}px;`;
				}
				return top
			}
		},
		methods: {
			/* ---------------------------------  业务模块  ---------------------------------- */
			// onShow监听刷新
			showLoading() {
				let that = this;
				that.params.current = 1;
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						// console.log('当前位置的经度-----：', res);
						that.params.sort.latitude = res.latitude;
						that.params.sort.longitude = res.longitude;
						if (that.stateType == 1) {
							that.getInstitutionsList(); // 获取广场机构的数据列表
							return;
						}
						if (that.userType == 8) {
							if (that.stateType == 2) {
								that.getDemandList(); // 请求需求列表数据
								return;
							}
						}
					},
					fail() {
						// console.log('位置定位失败返回----', error);
						that.locationModal = true;
					}
				});
			},
			// 上拉加载
			pullLoading() {
				if (!this.noData) {
					this.params.current++;
					if (this.stateType == 1) {
						this.getInstitutionsList(); // 获取广场机构的数据列表
						return;
					}
					if (this.stateType == 2) {
						this.getDemandList(); // 请求需求列表数据
						return;
					}
				}

			},
			// 下拉刷新
			downLoading() {
				let that = this;
				that.params.current = 1;
				that.getInstitutionsList(); // 获取广场机构的数据列表
				if (that.userType == 8) {
					that.getDemandList(); // 请求需求列表数据
				}
				setTimeout(() => {
					that.$refs.uToast.show({
						title: '刷新成功',
						type: 'success'
					});
					uni.stopPullDownRefresh(); // 停止刷新
				}, 100);
			},
			// 点击tabber切换类型
			tabberTypeClick(type) {
				this.$emit('handlepageScrollTo') // 点击--返回顶部
				this.params.current = 1;
				if (type == 1) {
					this.stateType = 1;
					this.tabsList = [{
						cate_name: '离我最近'
					}, {
						cate_name: '最新注册'
					}];
					this.currentTabsIndex = 0
					this.params.sort.type = 1;
					this.tabberTypeOne = true;
					this.tabberTypeTwo = false;
					this.getInstitutionsList(); // 获取广场机构的数据列表
					return;
				}
				if (type == 2) {
					this.stateType = 2;
					this.tabsList = [{
						cate_name: '综合'
					}, {
						cate_name: '离我最近'
					}, {
						cate_name: '最新发布'
					}];
					this.currentTabsIndex = 0
					this.params.sort.type = 0;
					this.tabberTypeOne = false;
					this.tabberTypeTwo = true;
					this.getDemandList(); // 请求需求列表数据
					return;
				}
			},
			// 点击切换三大分类选择
			changeType(index) {
				let that = this;
				that.currentTabsIndex = index // 给tabs下标赋值
				that.$emit('handlepageScrollTo') // 点击--返回顶部
				uni.getLocation({
					type: 'gcj02',
					// isHighAccuracy: true, // 是否开启高精度定位
					// highAccuracyExpireTime: 5000, // 高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果
					success: function(res) {
						// console.log('当前位置的经度-----：', res);
						that.params.sort.latitude = res.latitude;
						that.params.sort.longitude = res.longitude;
						that.params.current = 1;
						if (that.stateType == 1) {
							if (index == 0) {
								that.params.sort.type = 1;
							} else if (index == 1) {
								that.params.sort.type = 0;
							}
							that.getInstitutionsList(); // 请求机构服务列表数据
							return;
						}
						if (that.stateType == 2) {
							that.params.sort.type = index;
							that.getDemandList(); // 请求需求列表数据
							return;
						}
					},
					fail() {
						// console.log('位置定位失败返回----', error);
						that.locationModal = true;
					}
				});
			},
			/* ---------获取服务机构列表数据----------- */
			async getInstitutionsList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				this.params.serviceType = 1; // 业务类型，1-维保，2-评估
				const data = await this.$http.post({
					url: '/serviceOrg/page',
					data: this.params
				});
				// console.log('维保---服务机构列表数据-----', data);
				if (data.code == 200) {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.InstitutionsList = [];
					} else if (infoList.length < 5 && this.params.current == 1) {
						// console.log('首次加载有数据，但小于5条');
						this.noData = true;
						this.InstitutionsList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.InstitutionsList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.InstitutionsList = this.InstitutionsList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			/* ---------获取需求列表数据----------- */
			async getDemandList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				delete this.params.serviceType;
				const data = await this.$http.post({
					url: '/project/page',
					data: this.params
				});
				// console.log('维保---需求列表数据-----', data);
				if (data.code == 200) {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.demandList = [];
					} else if (infoList.length < 5 && this.params.current == 1) {
						// console.log('首次加载有数据，但小于5条');
						this.noData = true;
						this.demandList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.demandList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.demandList = this.demandList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 进入搜索页面
			searchClick() {
				this.$pageJump.navigateTo('/pages/common/home/homeSearch?stateType=' + this.stateType);
			},
			// 点击进入机构详情页
			organizationClick(item) {
				this.$emit('handleScroll') // 点击详情记录当前的位置
				this.$pageJump.navigateTo('/pages/common/home/homeDetails?id=' + item.id + '&nearest=' + item.nearest);
			},
			// 进去需求详情页
			demandClick(item) {
				this.$emit('handleScroll') // 点击详情记录当前的位置
				this.$pageJump.navigateTo('/pages/maintenance/public/demand/demandDetails?id=' + item
					.id);
			},
			// 判断是否需要抽查
			async getSpotCheck() {
				const data = await this.$http.post({
					url: '/serviceOrg/checkTask/userPage',
					data: {
						current: 1,
						size: 1,
						checkStatus: 1
					}
				});
				// console.log('有待抽查任务需要处理,请立即处理-----', data);
				if (data.code == 200 && data.data.records.length > 0) {
					let receiveTime = data.data.records[0].receiveTime // 系统开始抽查时间
					if (this.diffTime(receiveTime) < 15) {
						this.$emit('getCheck')
					}
				}
			},
			// 计算时间差
			diffTime(start) {
				let staytimeGap = new Date().getTime() - new Date(start).getTime();
				let stayMin = Math.floor(staytimeGap / (60 * 1000)); // 分钟
				return stayMin
			},
			// 抽查--确认操作
			checkConfirm() {
				this.$pageJump.navigateTo('/pages/maintenance/public/personal/spotTask/spotTask');
			},
			// 判断是否有未读作废提醒
			async getQueryUserNotReadLog() {
				const data = await this.$http.post({
					url: '/serviceOrg/queryUserNotReadLog'
				});
				// console.log('判断是否有未读作废提醒-----', data);
				if (data.code == 200 && data.data.cancelDepartmentName) {
					this.$emit('getTips', data.data)
				}
			},
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/pages/homePage/components/home.scss';

	.home-content-info {
		width: 500rpx;
	}

	.home-content-detailed {
		.fraction {
			font-size: 26rpx;
			background-color: #ff6f00;
			padding: 12rpx 22rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}
	}
</style>